<template>
  <div class="zhenghe_box">
  	<div class="box_height">
    <!--信用-整合玩法-->
    <div class="dingbu_xiazhu">
      <div class="display_sw">
        <div class="home_left">
          <span @click="touzhu1" :class="{bottom_border:isbottom}">我要投注</span>
          <span @click="touzhu2" :class="{bottom_border2:isbottom2}">投注记录</span>
        </div>
        <p class="home_you_fz">余额：{{user_info.wallet}}
            <i class="icon_flush" @click="updateWallet"></i>
        </p>
      </div>
    </div>
    <gameInfo :credit="true" @completeCount="completeCount"></gameInfo>
    <div class="home_count" v-if="qiehuan1">
      <ul class="zhenghe_ul_box">
        <li class="zhenghe_li">
          <p class="zhenghe_h3">第一球</p>
          <div class="xiazhu_div1">
            <integrationNumComp
              :odds="bonus_odd.oneball_odds"
              name="第一球"
              @handlerSelected="handlerSelected($event, 'one_ball')"
              ref="one_ball"
            />
            <integrationSquare
              :oods_ds="bonus_odd.oneball_ds"
              :oods_dx="bonus_odd.oneball_dx"
              name="第一球"
              @handlerSelected="handlerSelected($event, 'one_ball_xs')"
              ref="one_ball_xs"
            />
          </div>
        </li>
        <li class="zhenghe_li">
          <p class="zhenghe_h3">第二球</p>
          <div class="xiazhu_div1">
            <integrationNumComp
              :odds="bonus_odd.twoball_odds"
              name="第二球"
              @handlerSelected="handlerSelected($event, 'two_ball')"
              ref="two_ball"
            />
            <integrationSquare
              :oods_ds="bonus_odd.twoball_ds"
              :oods_dx="bonus_odd.twoball_dx"
              name="第二球"
              @handlerSelected="handlerSelected($event, 'two_ball_xs')"
              ref="two_ball_xs"
            />
          </div>
        </li>
        <li class="zhenghe_li">
          <p class="zhenghe_h3">第三球</p>
          <div class="xiazhu_div1">
            <integrationNumComp
              :odds="bonus_odd.threeball_odds"
              name="第三球"
              @handlerSelected="handlerSelected($event, 'three_ball')"
              ref="three_ball"
            />
            <integrationSquare
              :oods_ds="bonus_odd.threeball_ds"
              :oods_dx="bonus_odd.threeball_dx"
              name="第三球"
              @handlerSelected="handlerSelected($event, 'three_ball_xs')"
              ref="three_ball_xs"
            />
          </div>
        </li>

        <li class="zhenghe_li">
          <p class="zhenghe_h3">第四球</p>
          <div class="xiazhu_div1">
            <integrationNumComp
              :odds="bonus_odd.fourball_odds"
              name="第四球"
              @handlerSelected="handlerSelected($event, 'four_ball')"
              ref="four_ball"
            />
            <integrationSquare
              :oods_ds="bonus_odd.fourall_ds"
              :oods_dx="bonus_odd.fourall_dx"
              name="第四球"
              @handlerSelected="handlerSelected($event, 'four_ball_xs')"
              ref="four_ball_xs"
            />
          </div>
        </li>
        <li class="zhenghe_li">
          <p class="zhenghe_h3">第五球</p>
          <div class="xiazhu_div1">
            <integrationNumComp
              :odds="bonus_odd.fiveball_odds"
              name="第五球"
              @handlerSelected="handlerSelected($event, 'five_ball')"
              ref="five_ball"
            />
            <integrationSquare
              :oods_ds="bonus_odd.fiveball_ds"
              :oods_dx="bonus_odd.fiveball_dx"
              name="第五球"
              @handlerSelected="handlerSelected($event, 'five_ball_xs')"
              ref="five_ball_xs"
            />
          </div>
        </li>
        <li class="zhenghe_li">
          <p class="zhenghe_h3">总和</p>
          <div class="xiazhu_div1">
            <integrationSpecil
              :list="sumList"
              @handlerSelected="handlerSelected($event, 'sum_select')"
              ref="sum_select"
            />
          </div>
        </li>
        <li class="zhenghe_li zhenghe_li_posi">
          <div class="teshu_zhenghe">
            <p class="posi_whidth">特殊玩法</p>
            <b class="select_xia footer_div1_i posi_about" @click="qiansan">{{special_type}}</b>
          </div>
          <div class="xiazhu_div1 xiazhu_div2">
            <integrationSpecil
              :list="specialList"
              @handlerSelected="handlerSelected($event, 'special_select')"
              ref="special_select"
            />
          </div>
        </li>
      </ul>
      <creditFooter
        @randomConfirm="randomConfirm"
        @addCart="addCart"
        @handlerSubmitNow="handlerSubmitNow"
        ref="footer"
      />
      <!--子组件底部-->
      <div class="home_footer">
        <!--点击前三-->
        <van-popup v-model="qianshow" position="bottom">
          <van-picker show-toolbar :columns="columns2" @cancel="onCancel2" @confirm="onConfirm2" />
        </van-popup>
      <!--下注弹出密码框-->
        <!--<van-dialog
          v-model="isShowPasswordDialog"
          title="温馨提示"
          show-cancel-button
          @cancel="passwordDialogClose"
          @confirm="passwordDialogConfirm"
        >
          <div class="jiaoyi_div">
            <p class="jiaoyi_tishi_p">是否确认下注，确认请输入交易密码</p>
            <input type="password" class="jiaoyi_input" v-model="deal_pwd" placeholder="请输入交易密码" />
          </div>
        </van-dialog>-->

        <van-dialog v-model="isShowPasswordDialog" message="请确定下注" show-cancel-button @cancel="passwordDialogClose" @confirm="passwordDialogConfirm">
				</van-dialog>
      </div>
    </div>
    <!--这是五星复式的    投注记录组件的内容-->
    <div class="touzhu_zujian" v-else>
      <touzhujilu :isMultiple="true" ></touzhujilu>
    </div>
    	</div>
  </div>
</template>

<script>
import wanfa from "./components/wanfa";
import gameInfo from "../AComp/gameInfo";
import creditFooter from "../AComp/creditFooter";
import touzhujilu from "../wuxingwanfa/components/touzhujilu";
import integrationNumComp from "../AComp/integrationNumComp";
import integrationSquare from "../AComp/integrationSquare";
import integrationSpecil from "../AComp/integrationSpecil";
import { creditTidy } from "../../service/api";
import { mapState } from "vuex";
import _isEmpty from "lodash/isEmpty";
import _range from "lodash/range";
import _random from "lodash/random";
export default {
  components: {
    wanfa,
    touzhujilu,
    creditFooter,
    gameInfo,
    integrationNumComp,
    integrationSquare,
    integrationSpecil
  },
  data() {
    return {
      qianshow: false, //这是点击前三选择的弹窗
      columns2: ["前三", "中三", "后三"], //点击模式选择钱的模式
      //我要投注跟投注记录切换
      qiehuan1: true, //我要投注跟投注记录切换显示
      isbottom: true, //我要投注添加class
      isbottom2: false, //投注记录添加class

      special_type: "前三",
      one_ball: [],
      one_ball_xs: [],
      two_ball: [],
      two_ball_xs: [],
      three_ball: [],
      three_ball_xs: [],
      four_ball: [],
      four_ball_xs: [],
      five_ball: [],
      five_ball_xs: [],
      sum_select: [],
      special_select: [],

      amount_money: "",
      isShowPasswordDialog: false, //密码弹窗
      deal_pwd: "" //交易密码
    };
  },
  computed: {
    // 总和
    sumList() {
      let { bonus_odd } = this;
      let arr = [
        { text: "总大", odd: bonus_odd.sum_dx, type: "总和大小" },
        { text: "总小", odd: bonus_odd.sum_dx, type: "总和大小" },
        { text: "总单", odd: bonus_odd.sum_ds, type: "总和单双" },
        { text: "总双", odd: bonus_odd.sum_ds, type: "总和单双" }
      ];
      return arr;
    },
    specialList() {
      let { bonus_odd, special_type } = this;
      let arr = [
        { text: "豹子", odd: bonus_odd.baozi, type: special_type },
        { text: "顺子", odd: bonus_odd.shunzi, type: special_type },
        { text: "对子", odd: bonus_odd.duizi, type: special_type },
        { text: "杂六", odd: bonus_odd.zaliu, type: special_type },
        { text: "半顺", odd: bonus_odd.banshun, type: special_type }
      ];
      return arr;
    },
    randomData() {
      let { bonus_odd } = this;
      let arr = [
        {
          parentName: "第一球",
          odd: bonus_odd.oneball_odds,
          name: _range(10)
        },
        {
          parentName: "第二球",
          odd: bonus_odd.twoball_odds,
          name: _range(10)
        },
        {
          parentName: "第三球",
          odd: bonus_odd.threeball_odds,
          name: _range(10)
        },
        {
          parentName: "第四球",
          odd: bonus_odd.fourball_odds,
          name: _range(10)
        },
        {
          parentName: "第五球",
          odd: bonus_odd.fiveball_odds,
          name: _range(10)
        },
        {
          parentName: "第一球单双",
          odd: bonus_odd.oneball_ds,
          name: ["单", "双"]
        },
        {
          parentName: "第一球大小",
          odd: bonus_odd.oneball_dx,
          name: ["大", "小"]
        },
        {
          parentName: "第二球单双",
          odd: bonus_odd.twoball_ds,
          name: ["单", "双"]
        },
        {
          parentName: "第二球大小",
          odd: bonus_odd.twoball_dx,
          name: ["大", "小"]
        },
        {
          parentName: "第三球单双",
          odd: bonus_odd.threeball_ds,
          name: ["单", "双"]
        },
        {
          parentName: "第三球大小",
          odd: bonus_odd.threeball_dx,
          name: ["大", "小"]
        },
        {
          parentName: "第四球单双",
          odd: bonus_odd.fourall_ds,
          name: ["单", "双"]
        },
        {
          parentName: "第四球大小",
          odd: bonus_odd.fourall_dx,
          name: ["大", "小"]
        },
        {
          parentName: "第五球单双",
          odd: bonus_odd.fiveball_ds,
          name: ["单", "双"]
        },
        {
          parentName: "第五球大小",
          odd: bonus_odd.fiveball_dx,
          name: ["大", "小"]
        },
        {
          parentName: "总和大小",
          odd: bonus_odd.sum_dx,
          name: ["总大", "总小"]
        },
        {
          parentName: "总和单双",
          odd: bonus_odd.sum_ds,
          name: ["总单", "总双"]
        },
        {
          parentName: ["前三", "中三", "后三"],
          odd: bonus_odd.baozi,
          name: "豹子"
        },
        {
          parentName: ["前三", "中三", "后三"],
          odd: bonus_odd.shunzi,
          name: "顺子"
        },
        {
          parentName: ["前三", "中三", "后三"],
          odd: bonus_odd.duizi,
          name: "对子"
        },
        {
          parentName: ["前三", "中三", "后三"],
          odd: bonus_odd.zaliu,
          name: "杂六"
        },
        {
          parentName: ["前三", "中三", "后三"],
          odd: bonus_odd.banshun,
          name: "半顺"
        }
      ];
      return arr;
    },
    ...mapState(["user_info", "current_play_type", "bonus_odd"])
  },
  methods: {
    updateWallet(){
      console.log("更新余额")
      this.$store.dispatch("asyncGetUserInfo");
    },
    handlerSelected(data, type) {
      this[type] = data;
    },
    // 确认选号
    addCart(val) {
      let {
        one_ball,
        one_ball_xs,
        two_ball,
        two_ball_xs,
        three_ball,
        three_ball_xs,
        four_ball,
        four_ball_xs,
        five_ball,
        five_ball_xs,
        sum_select,
        special_select,
        current_play_type
      } = this;
      let arr = [
        one_ball,
        one_ball_xs,
        two_ball,
        two_ball_xs,
        three_ball,
        three_ball_xs,
        four_ball,
        four_ball_xs,
        five_ball,
        five_ball_xs,
        sum_select,
        special_select
      ];
      let temp = [];
      arr.forEach(el => {
        if (!_isEmpty(el)) {
          temp.push(...el);
        }
      });
      if (_isEmpty(temp)) {
        this.$toast("号码选择不完整,请重新选择");
        return;
      }
      console.log(temp, val);
      let money = val;
      let result = [];
      if (!val) {
        money = null;
      }
      temp.forEach(item => {
        let obj = {
          amount: money,
          name: item.value,
          odds: item.odd,
          parentName: item.type,
          playType: current_play_type
        };
        result.push(obj);
      });
      this.$store.commit("set_credit_cart", result);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },
    handlerSubmitNow(val) {
      let {
        one_ball,
        one_ball_xs,
        two_ball,
        two_ball_xs,
        three_ball,
        three_ball_xs,
        four_ball,
        four_ball_xs,
        five_ball,
        five_ball_xs,
        sum_select,
        special_select
      } = this;
      let arr = [
        one_ball,
        one_ball_xs,
        two_ball,
        two_ball_xs,
        three_ball,
        three_ball_xs,
        four_ball,
        four_ball_xs,
        five_ball,
        five_ball_xs,
        sum_select,
        special_select
      ];
      let temp = [];
      arr.forEach(el => {
        if (!_isEmpty(el)) {
          temp.push(...el);
        }
      });
      if (_isEmpty(temp)) {
        this.$toast("号码选择不完整,请重新选择");
        return;
      }
      if (!val) {
        this.$toast("请输入有效金额");
        return;
      }
      this.goodsList = temp;
      this.amount_money = val;
      this.isShowPasswordDialog = true;
    },
    passwordDialogConfirm() {
      let { goodsList, amount_money, bonus_odd, deal_pwd } = this;
      let result = [];
//    if (!deal_pwd) {
//      this.$toast("交易密码不能为空");
//      return;
//    }
      goodsList.forEach(item => {
        let obj = {
          amount: amount_money,
          name: item.value,
          odds: item.odd,
          parentName: item.type
        };
        result.push(obj);
      });
      let params = {
        deal_pwd,
        orderlist: JSON.stringify(result)
      };
      creditTidy(params).then(res => {
        this.initData();
        if (res.data.status_code === 200) {
          this.$toast(res.data.message);
          this.$store.dispatch('asyncGetUserInfo');
          this.passwordDialogClose();
        }
      });
    },
    // 密码框关闭
    passwordDialogClose() {
      this.isShowPasswordDialog = false;
      this.deal_pwd = "";
    },
    initData() {
      this.$refs.one_ball.clear();
      this.$refs.one_ball_xs.clear();
      this.$refs.two_ball.clear();
      this.$refs.two_ball_xs.clear();
      this.$refs.three_ball.clear();
      this.$refs.three_ball_xs.clear();
      this.$refs.four_ball.clear();
      this.$refs.four_ball_xs.clear();
      this.$refs.five_ball.clear();
      this.$refs.five_ball_xs.clear();
      this.$refs.sum_select.clear();
      this.$refs.special_select.clear();
      this.$refs.footer.clear();
      this.one_ball = [];
      this.one_ball_xs = [];
      this.two_ball = [];
      this.two_ball_xs = [];
      this.three_ball = [];
      this.three_ball_xs = [];
      this.four_ball = [];
      this.four_ball_xs = [];
      this.five_ball = [];
      this.five_ball_xs = [];
      this.sum_select = [];
      this.special_select = [];
    },
    completeCount(){
      this.initData();
    },
    randomConfirm(nums) {
      let {randomData,current_play_type} = this
      let temp = [];
      while (temp.length < nums) {
        temp.push(_random(randomData.length-1));
      }
      let arr = [];
      temp.forEach(item => {
        arr.push(randomData[item])
      })
      let result = [];
      arr.forEach(item => {
        let special = ["豹子","顺子","对子","杂六","半顺"];
        let obj;
        if(special.includes(item.name)){
          let n = _random(item.parentName.length-1);
          obj = {
            amount: null,
            name: item.name,
            odds: item.odd,
            parentName: item.parentName[n],
            playType: current_play_type
          };
        }else{
          let n = _random(item.name.length-1);
          obj = {
            amount: null,
            name: item.name[n],
            odds: item.odd,
            parentName: item.parentName,
            playType: current_play_type
          };
        }
        result.push(obj);
      });
      this.$store.commit("set_credit_cart", result);
      this.initData();
      this.$router.push("/credit/xiazhulan");
    },
    //我要投注
    touzhu1() {
      this.qiehuan1 = true;
      this.isbottom = true;
      this.isbottom2 = false;
    },
    //投注记录
    touzhu2() {
      this.qiehuan1 = false;
      this.isbottom2 = true;
      this.isbottom = false;
    },
    //点击豹子半顺
    matchClass3(index) {
      return this.activeIndex3.includes(index);
    },
    changeMatch3(index) {
      let bol = this.activeIndex3.includes(index);
      if (bol) {
        // 若是选中这个，则删除一个这个index
        this.activeIndex3.splice(this.activeIndex3.indexOf(index), 1);
      } else {
        // 若是没有，则添加这个下标
        this.activeIndex3.push(index);
      }
      this.$emit("getActiveData", this.activeIndex3);
    },
    //点击前三选择玩法
    qiansan() {
      this.qianshow = true;
    },
    //点击前三确定
    onConfirm2(value, index) {
      console.log(value, index);
      this.special_type = value;
      this.qianshow = false;
    },
    //点击前三取消
    onCancel2() {
      this.qianshow = false;
    }
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/zhenghe.css");
.display_strad .color_or {
  background-color: #d37417;
}

.zhenghe_box {
  background: #f2f2f2;
  height: 100vh;
}

.zhenghe_ul_box li {
  background: #f2f2f2;
}

.zhenghe_li {
  padding-bottom: 0.03rem;
}

.zhenghe_danshuang6 .zhenghe_span.active {
  background: #d21d17;
}

.zhenghe_danshuang6 {
  padding-bottom: 0.3rem;
}
.xiazhu_div1{margin-top: 0.2rem;}
.xiazhu_div2 .zhenghe_danshuang .zhenghe_span{width: 19%;}
.zhenghe_li_posi{position: relative;}
.posi_about{position: absolute;right: 0.36rem;}
.posi_whidth{width: 100%;text-align: center;}
.home_left span{margin-right: 0.1rem;}
 .zhenghe_box{
 	padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom);
  }
  .box_height{
  padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom);
  }
  .zhenghe_ul_box{margin-bottom: 2rem;}
</style>
